<template>
    <div class="infoContent">
        <common-loading :loading="loading" loadingText="">
            <i slot="loadingIcon" class="el-icon-loading"></i>
        </common-loading>
        <div class="settingsContainer" v-if="!loading">
            <el-table :data="userData" width="100%"  height="93%">
                <el-table-column prop="index" label="序号" width="80"></el-table-column>
                <el-table-column prop="userid" label="用户ID" v-if="false"></el-table-column>
                <el-table-column prop="name" label="用户名"></el-table-column>
                <el-table-column prop="authority" label="登录权限"></el-table-column>
                <el-table-column label="操作">
                    <template slot-scope="scope" width="350">
                        <el-button size="mini" icon="el-icon-edit" @click="handleEdit(scope.$index, scope.row)">
                            编辑
                        </el-button>
                        <el-button size="mini" type="danger" icon="el-icon-delete" @click="handleDelete(scope.$index, scope.row)">
                            删除
                        </el-button>
                    </template>
                </el-table-column>
            </el-table>
            <el-pagination class="pagination" layout="prev, pager, next" v-if="!loading && pageCount>1" :page-count="pageCount"  
            :page-size="pageSize" :current-page.sync="currentPage" @current-change="handleCurrentChange" 
            @prev-click="handlePrevClick" @next-click="handleNextClick">
            </el-pagination>
        </div>
        <user-edit-form :showEditForm.sync="showEditForm" :userObj="userObj"></user-edit-form> 
    </div>
    
</template>
<script>
    import UserEditForm from "./UserEditForm.vue"
    import CommonLoading from "../components/CommonLoading.vue"
    import util from '../util/util'
    export default {
        data(){
            return {
                userData:[],
                dialogFormVisible: false,
                userObj:{
                    userId:'',
                    userName:'',
                    authority:''
                },
                pageCount:1,
                currentPage:1,
                pageSize:12,
                loading:false,
                showEditForm:false,
                updateObj:{
                    show:false,
                    isClosed:false
                }
            }
        },
        components:{
            UserEditForm,
            CommonLoading
        },
        created(){
            this.fetchData();
        },
        computed:{
            getState(){
                return this.$store.state.updateUserData;
            }
        },
        watch:{
            getState: function(newState){
                if(newState) this.fetchData();			
            }
		},
        methods: {
            processData(data){
                let tmpData = [];
                for(let i in data){
                    let userobj = {};
                    userobj["index"] = (this.currentPage-1)*this.pageSize+parseInt(i)+1;
                    userobj["userid"] = data[i]["user_guid"];
                    userobj["name"] = data[i]["username"];
                    userobj["authority"] = data[i]["authority"]=="9"?"管理员":"普通用户";
                    tmpData.push(userobj);
                }
                this.userData = tmpData;
            },
            fetchData(){
                this.loading = true;
                this.$api.user.userList({page_size:this.pageSize,page_index:parseInt(this.currentPage)}).then(response => {
                    setTimeout(()=>{
                        this.loading = false;
                    },500);
					if(response.data.code=="6000"){
                        this.pageCount = response.data.data.total_pages;
                        let data = response.data.data.users;
                        if(this.pageCount<this.currentPage){
                            this.currentPage -= 1;
                            this.fetchData();
                            return false;
                        }
                        this.processData(data);
                    }else{
                        this.$message({
                            message: util.getErrorInfo(response.data.code),
                            type: 'error'
                        });
                    }
				}).catch(error => {
                    this.loading = false;
                });
                this.$store.dispatch("updateUserData", false);
            },
            handleEdit(index, row) {
                this.userObj.userId = row.userid;
                this.userObj.userName = row.name;
                this.userObj.authority = row.authority=="管理员"?"9":"0";
                this.showEditForm = true;
            },
            handleDelete(index, row) {
                this.$confirm('此操作将永久删除该数据, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    //删除请求
                    this.$api.user.userDelete({guid:row.userid}).then(response=>{
                        if(response.data.code=="6000"){
                                this.$message({
                                type: 'success',
                                message: '删除成功!'
                            });
                            this.fetchData();
                        }else{
                            this.$message({
                                type: 'error',
                                message: util.getErrorInfo(response.data.code)
                            });
                        }
                    });
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    });          
                });
            },
            handleCurrentChange(value){
                this.currentPage = value;
                this.fetchData();
            },
            handlePrevClick(value){
                this.currentPage = value;
                this.fetchData();
            },
            handleNextClick(value){
                this.currentPage = value;
                this.fetchData();
            }
        }
    }
</script>
<style lang="scss" scoped>
@import "../assets/basic.scss";
    .infoContent{
        .settingsContainer{
            overflow: hidden;
            position: relative;
            width: 96%;
            height: 96%;
            margin: 2%;
            border-radius: 4px;
            //background-color:#fff;
            .pagination{
              background-color: #606273;   
            }
        }
        
    }
    
</style>
<!-- <style lang="css" scoped>
.settingsContainer .el-table{
    background-color:  #262E51;
}
.settingsContainer .el-table >>> th {
      background-color:  #262E51 ;
      color: #fff ;
    }

.settingsContainer .el-table >>> tr {
      background-color:  #262E51 ;
      color: #fff;
    }

.settingsContainer .el-table >>> td,
.settingsContainer .el-table >>> th.is-leaf {
      border-bottom: 1px solid rgba(0, 0, 0, .2);
    }   
    
</style> -->

